<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('作品列表')" />
    <style>
        .work-cover {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }
        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: #fff;
        }
        .status-passed {
            background-color: #7cc67c;
        }
        .status-rejected {
            background-color: #f56c6c;
        }
        .operate-btn {
            margin-right: 5px;
        }
        .resource-link {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }
        .resource-link i {
            margin-right: 5px;
        }
        .data-item {
            margin-bottom: 5px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>作品标题：</label>
                            <input type="text" name="title"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">

            <a class="btn btn-primary single disabled" onclick="batchPass()" >
                <i class="fa fa-edit"></i> 批量通过
            </a>
            <a class="btn btn-danger multiple disabled" onclick="batchReject()" >
                <i class="fa fa-remove"></i> 批量驳回
            </a>
<!--            <a class="btn btn-warning" onclick="batchDownload()" >-->
<!--                <i class="fa fa-download"></i> 批量下载-->
<!--            </a>-->
            <a class="btn btn-warning" onclick="batchDelete()" >
                <i class="fa fa-download"></i> 批量删除
            </a>

        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('comp:work:edit')}]];
    var removeFlag = [[${@permission.hasPermi('comp:work:remove')}]];
    var prefix = ctx + "comp/work";

    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "作品",
            columns: [{
                checkbox: true
            },
                {
                    field: 'workCover',
                    title: '作品封面',
                    formatter: function(value, row, index) {
                        return '<img class="work-cover" src="' + value + '" alt="作品封面">';
                    }
                },
                {
                    field: 'workName',
                    title: '作品名称',
                    formatter: function(value, row, index) {
                        return '<div>' + value + '</div>' +
                            '<div>ID: ' + row.id + '</div>' +
                            '<div>联系人: ' + row.contactName + '</div>' +
                            '<div>' + row.workIntro + '</div>' +
                            '<a href="javascript:void(0)" onclick="showDetail(\'' + row.id + '\')" style="color: #e74c3c;">展开</a>';
                    }
                },
                {
                    field: 'videoResources',
                    title: '视频资源',
                    formatter: function(value, row, index) {
                        var html = '';
                        if (row.videoResources && row.videoResources.length > 0) {
                            row.videoResources.forEach(function(item) {
                                html += '<a href="' + item.url + '" class="resource-link" target="_blank"><i class="fa fa-film"></i>' + item.name + '</a>';
                            });
                        }
                        return html;
                    }
                },
                {
                    field: 'documentAttachments',
                    title: '文档附件',
                    formatter: function(value, row, index) {
                        var html = '';
                        if (row.documentAttachments && row.documentAttachments.length > 0) {
                            row.documentAttachments.forEach(function(item) {
                                html += '<a href="' + item.url + '" class="resource-link" target="_blank"><i class="fa fa-file-text-o"></i>' + item.name + '</a>';
                            });
                        }
                        return html;
                    }
                },
                {
                    field: 'dataDisplay',
                    title: '数据展示',
                    formatter: function(value, row, index) {
                        return '<div class="data-item">综合得分: ' + row.totalScore + ' 点赞量: ' + row.likeCount + '</div>' +
                            '<div class="data-item">浏览量: ' + row.viewCount + ' 转发量: ' + row.shareCount + '</div>' +
                            '<div class="data-item">学生评分: ' + row.studentScore + ' 教师评分: ' + row.teacherScore + '</div>';
                    }
                },
                {
                    field: 'status',
                    title: '审核状态',
                    formatter: function(value, row, index) {
                        var userType = "";
                        var color = "status-tag";
                        if (row.status == '0') {
                            color = "status-tag";
                            userType = "待审核"
                        } else if(row.status == '1'){
                            color = "status-tag status-passed";
                            userType = "已通过";
                        } else if(row.status == '2'){
                            color = "status-tag status-rejected";
                            userType = "已驳回";
                        }
                        return '<span class="label label-' + color + '">' + userType + '</span>';
                    }
                },
            ]
        };
        $.table.init(options);
    });

    function showDetail(id) {
        // 展开详情逻辑，可根据需求实现弹窗或页面跳转
        $.modal.open("作品详情", prefix + "/detail/" + id, '800', '600');
    }

    function reject(id) {
        // 驳回逻辑，可根据需求调用后端接口
        $.modal.confirm("确认驳回该作品吗？", function() {
            $.operate.post(prefix + "/reject", { "id": id });
        });
    }

    function download(id) {
        // 下载逻辑，可根据需求调用后端下载接口
        window.location.href = prefix + "/download/" + id;
    }

    function batchPass() {
        var ids = $.table.selectColumns("id");
        if (ids.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $.modal.confirm("确认要通过选中的" + ids.length + "条数据吗?", function() {
            var data = {
                "ids": ids.join(",")  // 明确指定逗号分隔（默认也是逗号，这里更清晰）
            };
            $.operate.submit(prefix + "/batchPass", "post", "json", data);
        });
    }

    function batchReject() {
        var ids = $.table.selectColumns("id");
        if (ids.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $.modal.confirm("确认要驳回选中的" + ids.length + "条数据吗?", function() {
            var data = {
                "ids": ids.join(",")  // 明确指定逗号分隔（默认也是逗号，这里更清晰）
            };
            $.operate.submit(prefix + "/batchReject", "post", "json", data);
        });
    }

    function batchDelete() {
        var ids = $.table.selectColumns("id");
        if (ids.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $.modal.confirm("确认要删除选中的" + ids.length + "条数据吗?", function() {
            var data = {
                "ids": ids.join(",")  // 明确指定逗号分隔（默认也是逗号，这里更清晰）
            };
            $.operate.submit(prefix + "/batchDelete", "post", "json", data);
        });

    }


    function batchDownload() {
        var ids = $.table.selectColumns("id");
        if (ids.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        // $.modal.confirm("确认要下载选中的" + ids.length + "条数据吗?", function() {
        //     var data = {
        //         "ids": ids.join(",")  // 明确指定逗号分隔（默认也是逗号，这里更清晰）
        //     };
        //     $.operate.submit(prefix + "/batchDownload", "get", "json", data);
        // });

        $.modal.confirm("确认要下载选中的" + ids.length + "条数据吗?", function() {
            var url = prefix + "/batchDownload?ids=" + encodeURIComponent(ids.join(","));
            window.open(url, '_blank');
        });
    }


</script>
</body>
</html>